<template>
  <div class="MyFollow">
    <head-title>我的关注</head-title>
    <div class="myfouces" v-for="item in info" :key="item.id">
      <div class="left">
        <img :src="$axios.defaults.baseURL + item.head_img" alt="" />
      </div>
      <div class="center">
        <div class="nickname">{{ item.nickname }}</div>
        <div class="date">{{ item.date | date }}</div>
      </div>
      <div class="right">
        <van-button
          round
          type="info"
          size="mini"
          color="grey"
          @click="unfollow(item.id)"
          >取消关注</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
    };
  },
  created() {
    this.follow();
    this.getinfo();
  },
  methods: {
    async getinfo() {
      const id = localStorage.getItem("id");
      const res = await this.$axios.get(`/user_follows`);
      console.log(res);
      this.info = res.data.data;
    },
    async unfollow(id) {
      const res = await this.$axios.get(`/user_unfollow/${id}`);
      this.getinfo();
    },
    async follow() {
      // const id = +new Date();
      const res = await this.$axios.get(`/user_follows/1`);
      console.log(res);
      this.getinfo();
    },
  },
};
</script>

<style scoped lang='less'>
.MyFollow {
  .myfouces {
    margin: 10px;
    display: flex;
    align-items: center;
    .left {
      height: 60px;
      img {
        height: 60px;
      }
    }
    .center {
      flex: 1;
      font-size: 15px;
      .date {
        margin-top: 10px;
        font-size: 12px;
        opacity: 0.7;
      }
    }
  }
}
</style>